<ul>
    <li>
        <div class="display-users">
            <input class="form-control chat-user-filter" placeholder="Filter" type="text">
            <dl>
                <dt>
                    <a href="#" class="usr"
                       data-chat-id="cha1"
                       data-chat-fname="Sadi"
                       data-chat-lname="Orlaf"
                       data-chat-status="busy"
                       data-chat-alertmsg="Sadi Orlaf is in a meeting. Please do not disturb!"
                       data-chat-alertshow="true"
                       popover-trigger="hover"
                       popover-placement="right"
                       smart-popover-html="
										<div class='usr-card'>
											<img src='styles/img/avatars/5.png' alt='Sadi Orlaf'>
											<div class='usr-card-content'>
												<h3>Sadi Orlaf</h3>
												<p>Marketing Executive</p>
											</div>
										</div>
									">
                        <i></i>Sadi Orlaf
                    </a>
                </dt>
                <dt>
                    <a href="#" class="usr"
                       data-chat-id="cha2"
                       data-chat-fname="Jessica"
                       data-chat-lname="Dolof"
                       data-chat-status="online"
                       data-chat-alertmsg=""
                       data-chat-alertshow="false"
                       popover-trigger="hover"
                       popover-placement="right"
                       smart-popover-html="
										<div class='usr-card'>
											<img src='styles/img/avatars/1.png' alt='Jessica Dolof'>
											<div class='usr-card-content'>
												<h3>Jessica Dolof</h3>
												<p>Sales Administrator</p>
											</div>
										</div>
									">
                        <i></i>Jessica Dolof
                    </a>
                </dt>
                <dt>
                    <a href="#" class="usr"
                       data-chat-id="cha3"
                       data-chat-fname="Zekarburg"
                       data-chat-lname="Almandalie"
                       data-chat-status="online"
                       popover-trigger="hover"
                       popover-placement="right"
                       smart-popover-html="
										<div class='usr-card'>
											<img src='styles/img/avatars/3.png' alt='Zekarburg Almandalie'>
											<div class='usr-card-content'>
												<h3>Zekarburg Almandalie</h3>
												<p>Sales Admin</p>
											</div>
										</div>
									">
                        <i></i>Zekarburg Almandalie
                    </a>
                </dt>
                <dt>
                    <a href="#" class="usr"
                       data-chat-id="cha4"
                       data-chat-fname="Barley"
                       data-chat-lname="Krazurkth"
                       data-chat-status="away"
                       popover-trigger="hover"
                       popover-placement="right"
                       smart-popover-html="
										<div class='usr-card'>
											<img src='styles/img/avatars/4.png' alt='Barley Krazurkth'>
											<div class='usr-card-content'>
												<h3>Barley Krazurkth</h3>
												<p>Sales Director</p>
											</div>
										</div>
									">
                        <i></i>Barley Krazurkth
                    </a>
                </dt>
                <dt>
                    <a href="#" class="usr offline"
                       data-chat-id="cha5"
                       data-chat-fname="Farhana"
                       data-chat-lname="Amrin"
                       data-chat-status="incognito"
                       popover-trigger="hover"
                       popover-placement="right"
                       smart-popover-html="
										<div class='usr-card'>
											<img src='styles/img/avatars/female.png' alt='Farhana Amrin'>
											<div class='usr-card-content'>
												<h3>Farhana Amrin</h3>
												<p>Support Admin <small><i class='fa fa-music'></i> Playing Beethoven Classics</small></p>
											</div>
										</div>
									">
                        <i></i>Farhana Amrin (offline)
                    </a>
                </dt>
                <dt>
                    <a href="#" class="usr offline"
                       data-chat-id="cha6"
                       data-chat-fname="Lezley"
                       data-chat-lname="Jacob"
                       data-chat-status="incognito"
                       popover-trigger="hover"
                       popover-placement="right"
                       smart-popover-html="
										<div class='usr-card'>
											<img src='styles/img/avatars/male.png' alt='Lezley Jacob'>
											<div class='usr-card-content'>
												<h3>Lezley Jacob</h3>
												<p>Sales Director</p>
											</div>
										</div>
									">
                        <i></i>Lezley Jacob (offline)
                    </a>
                </dt>
            </dl>


            <!--<a href="chat.html" class="btn btn-xs btn-default btn-block sa-chat-learnmore-btn">About the API</a>-->
        </div>
    </li>
</ul>